<template>
	<view class="context">
		<view class="select">
			<u-cell-group>
				<u-cell-item title="选择币种" :title-style="{fontSize:'32rpx',fontWeight:'bold'}" value="BTC"></u-cell-item>
			</u-cell-group>
		</view>
		<view class="address">
			<u-cell-group>
				<u-cell-item title="提币地址" :arrow="false">
					<u-icon slot="right-icon" size="32" name="scan"></u-icon>
				</u-cell-item>
			</u-cell-group>
		</view>
		<view class="box">
			<view class="box-title">
				<text>提币数量</text>
				<text class="charges">手续费：0.001BTC</text>
			</view>
			<view class="box-input">
				<u-input placeholder="请输入发送数量" :focus="true"></u-input>
				<text class="box-input-btn">全部</text>
			</view>
			<view class="box-info">可用0BTC</view>
		</view>
		<view class="person">
			<view class="person-text">接收人</view>
			<view class="person-text-input">
				<u-input placeholder="请输入接收人UID"></u-input>
			</view>
		</view>
		<view class="tip">为保障资金安全，我们会对提币进行人工审核，请耐心等待~</view>
		<button class="submit">确认提现</button>
	</view>
</template>

<script>
import moment from "moment";
import { mapState, mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      selectShow: false,
      payPasswordShow: false,
      selectedSymbol: null,

      withdrawInput: "",
      withdrawAddress: "",

      labelText: "",
    };
  },
  watch: {
    withdrawInput(input) {
      if (input > this.selectedAsset.balance) {
        this.withdrawInput = this.selectedAsset.balance;
      }
    },
  },
  computed: {
    ...mapGetters("asset", ["assets"]),
    selectedAsset() {
      const asset =
        this.assets.find((asset) => asset.symbol == this.selectedSymbol) ||
        this.assets[0];

      return asset;
    },
  },
  async onLoad({ symbol }) {
    if (symbol) {
      this.selectAssetBySymbol(symbol);
    }
  },
  async onShow() {
    await this.loadAssets();
    await this.loadLabel();
  },
  methods: {
    ...mapActions("asset", ["loadAssets", "withdraw"]),
    ...mapActions("system", ["getLabel"]),
    selectAssetBySymbol(symbol) {
      this.selectedSymbol = symbol;
      this.selectShow = false;
    },
    selectAssetByIndex(index) {
      const asset = this.assets[index] || this.assets[0];
      this.selectAssetBySymbol(asset.symbol);
    },
    async loadLabel() {
      let data = await this.getLabel("system.withdraw.explain");
      this.labelText = data
        .replace(
          "{withdraw_min}",
          parseFloat(this.selectedAsset.coin.withdraw_min)
        )
        .replace(
          "{withdraw_fee}",
          parseFloat(this.selectedAsset.coin.withdraw_fee)
        )
        .replace(/{symbol}/g, this.selectedAsset.symbol);
    },
    // 扫码
    scanCode() {
      console.log(">>???");
      uni.scanCode({
        onlyFromCamera: true,
        success: (res) => {
          this.withdrawAddress = res.result;
        },
      });
    },
    // 全部
    allExchange() {
      this.withdrawInput = this.selectedAsset.balance;
    },
    withdrawSubmit() {
      this.togglePayPassword(true);
    },
    togglePayPassword(forceShow) {
      const symbol = this.selectedAsset.symbol;
      const withdrawInput = parseFloat(this.withdrawInput);
      const withdrawAddress = this.withdrawAddress;
      const show =
        forceShow !== undefined ? !!forceShow : !this.payPasswordShow;

      if (show) {
        if (withdrawAddress == "") {
          throw new Error(this.$t("wallet.withdrawPage.tipsAddressNull"));
        } else if (withdrawInput == "") {
          throw new Error(this.$t("wallet.withdrawPage.tipsNumNull"));
        } else if (withdrawInput < this.selectedAsset.coin.withdraw_min)
          throw new Error(this.$t("wallet.withdrawPage.tipsNumMin"));
      }

      this.payPasswordShow = show;
    },
    async payPasswordDone(params) {
      const symbol = this.selectedAsset.symbol;
      const withdrawInput = parseFloat(this.withdrawInput);
      const withdrawAddress = this.withdrawAddress;
      await this.withdraw({
        to: withdrawAddress,
        symbol,
        num: withdrawInput,
        pay_password: params.password,
      });
      this.payPasswordShow = false;

      /* 提币成功 后续操作 */
      this.handleNavTo({
        url:
          "/pages/wallet/withdraw/result?num=" +
          withdrawInput +
          "&symbol=" +
          symbol +
          "&date=" +
          moment().format("YYYY-MM-DD HH:mm:ss"),
      });
    },
  },
};
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
		height: 100vh;
	}
	.select{
		margin-top: 25rpx;
	}
	.address{
		margin-top: 20rpx;
	}
	.box{
		background-color: #fff;
		padding: 20rpx;
		.box-title{
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.charges{
				font-size: 24rpx;
				color: #999;
			}
		}
		.box-input{
			display: flex;
			margin: 40rpx auto;
			.box-input-btn{
				color: #2A96EE;
				font-size: 30rpx;
			}
		}
		.box-info{
			font-size: 24rpx;
			color: #999;
		}
	}
	.person{
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		.person-text{
			font-size: 32rpx;
			font-weight: bold;
			margin-right: 20rpx;
		}
	}
	.tip{
		width: 90%;
		margin: 40rpx auto;
		font-size: 24rpx;
		color: #2A96EE;
	}
	.submit{
		width: 690rpx;
		height: 88rpx;
		background: #2A96EE;
		border-radius: 12rpx;
		color: #fff;
		margin: 70rpx auto;
	}
</style>
